import React from 'react';
import { Card, Typography, Tag } from 'antd';
import type { Script } from '@/types';

const { Text, Paragraph } = Typography;

interface ScriptEditorProps {
  script: Script;
  readOnly?: boolean;
}

const ScriptEditor: React.FC<ScriptEditorProps> = ({ script, readOnly = false }) => {
  const getTypeTag = (type: 'node' | 'python' | 'bash') => {
    const typeMap = {
      node: { color: 'blue', text: 'Node.js' },
      python: { color: 'orange', text: 'Python' },
      bash: { color: 'green', text: 'Bash' },
    };
    return <Tag color={typeMap[type].color}>{typeMap[type].text}</Tag>;
  };

  return (
    <div>
      <Card size="small" style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <Text strong style={{ fontSize: 16 }}>{script.name}</Text>
            {getTypeTag(script.type)}
          </div>
          <Text type="secondary">
            更新时间: {new Date(script.updatedAt).toLocaleString()}
          </Text>
        </div>
        {script.description && (
          <Paragraph style={{ marginTop: 8, marginBottom: 0 }}>
            {script.description}
          </Paragraph>
        )}
      </Card>

      <Card title="脚本内容" size="small">
        <pre
          style={{
            backgroundColor: '#f5f5f5',
            padding: 16,
            borderRadius: 4,
            overflow: 'auto',
            maxHeight: 500,
            fontFamily: 'Monaco, Consolas, "Courier New", monospace',
            fontSize: 14,
            lineHeight: 1.5,
            margin: 0,
          }}
        >
          {script.content}
        </pre>
      </Card>
    </div>
  );
};

export default ScriptEditor;